<template>
    <div>
        <!-- <div class="title-warp">
            <div
                class="title-box"
                v-for="(item, index) in titleDta"
                :key="index"
                @click="handleShow"
            >
                <div style="display: flex">
                    <div>
                        <el-image :src="item.img" fit="fill"> </el-image>
                    </div>

                    <div style="font-size: 12px; line-height: 50px">
                        {{ item.name }}
                    </div>
                </div>
            </div>
        </div> -->
        <div
            style="margin: 20px 100px 0px 100px"
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
        >
            <div class="content-warp">
                <div
                    v-for="(item, index) in contentDta"
                    :key="index"
                    class="content-box"
                >
                    <div class="title">
                        {{ item.roomName }}
                    </div>
                    <div class="tabs">
                        <div class="tabs-flex">
                            <div>
                                <el-image
                                    :src="
                                        require('@/assets/scene/temperature.png')
                                    "
                                    fit="fill"
                                ></el-image>
                            </div>
                            <div>{{ item.temperature }}℃</div>
                        </div>
                        <div>
                            <div class="tabs-flex">
                                <div>
                                    <el-image
                                        :src="
                                            require('@/assets/scene/humidness.png')
                                        "
                                        fit="fill"
                                    ></el-image>
                                </div>
                                <div>{{ item.humidity }}°</div>
                            </div>
                        </div>
                        <div>
                            <div class="tabs-flex">
                                <div>
                                    <el-image
                                        :src="
                                            require('@/assets/scene/alarm.png')
                                        "
                                        fit="fill"
                                    ></el-image>
                                </div>
                                <div>{{ item.light || "较强" }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="bottom-warp">
                        <div
                            v-for="(item2, index2) in item.subData"
                            :key="index2"
                            class="bottom-box"
                            @click="handleShow(item2)"
                        >
                            <el-image
                                :src="require('@/assets/scene/alarm.png')"
                                fit="fill"
                            >
                            </el-image>
                            <el-tooltip
                                class="item"
                                effect="dark"
                                :content="item2.devName"
                                placement="top"
                            >
                                <div
                                    style="
                                        font-size: 12px;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                    "
                                >
                                    {{ item2.devName }}
                                </div>
                            </el-tooltip>
                            <div class="bottom-box-close">
                                {{ item2.attrValue === "0" ? "关闭" : "打开" }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <cmdDialog ref="cmdRef" @getData="getData"></cmdDialog>
        </div>
    </div>
</template>
<script>
import { getList } from "@/api/scene/index";
import cmdDialog from "./cmdDialog.vue";
export default {
    components: { cmdDialog },
    name: "officeRoom",
    data() {
        return {
            titleDta: [
                {
                    name: "上班",
                    img: require("@/assets/scene/alarm.png"),
                },
                {
                    name: "下班",
                    img: require("@/assets/scene/alarm.png"),
                },
                {
                    name: "午休",
                    img: require("@/assets/scene/alarm.png"),
                },
                {
                    name: "打开窗帘",
                    img: require("@/assets/scene/alarm.png"),
                },
            ],
            contentDta: [],
            loading: false,
        };
    },
    created() {},
    mounted() {
        this.getData();
    },
    methods: {
        async getData() {
            this.loading = true;
            const {
                data: { code, data, msg },
            } = await getList();
            if (code == 200) {
                this.loading = false;
                this.contentDta = data;
            } else {
                this.$message.error(msg);
            }
        },
        handleShow(e) {
            this.$refs.cmdRef.handleShowDialog(e);
        },
    },
};
</script>
<style lang="scss" scoped>
.title-warp {
    display: flex;
    gap: 40px;
    margin: 20px 0;
    justify-content: center;
    .title-box {
        width: 200px;
        background-color: #ccc;
        border-radius: 10px;
        padding: 10px;
        .el-image {
            width: 50px;
            height: 50px;
        }
    }
}
.content-warp {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 3列等宽 */
    grid-gap: 20px; /* 列间距 */
    grid-column-gap: 30px;
    .content-box {
        // height: 240px;
        background-color: #439b6b;
        border-radius: 10px;
        padding: 10px;
        color: #fff;
        // height: 380px;
        // overflow: auto;
        .title {
            font-size: 18px;
        }
        .tabs {
            margin: 15px 0;
            display: flex;
            gap: 20px;
            .tabs-flex {
                display: flex;
                gap: 10px;
                font-size: 13px;
                align-items: center;
                .el-image {
                    width: 20px;
                    height: 20px;
                }
            }
        }
    }
    .bottom-warp {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3列等宽 */
        grid-gap: 10px; /* 列间距 */
        // grid-column-gap: 30px;
        .bottom-box {
            cursor: pointer;
            // height: 40px;
            background-color: #bddccd;
            border-radius: 10px;
            padding: 5px;
            font-size: 14px;
            line-height: 1.5;
            width: 75px;
            color: #000;
            .el-image {
                width: 14px;
                height: 14px;
            }
            &-close {
                font-size: 12px;
                color: #a8bab0;
            }
        }
    }
}
</style>
